<template>
  <div :id="this.outerid" style="height:200px" class="chart"></div>
</template>
<script>
import * as echarts from "echarts";
// import {CanvasRenderer} from "echarts/renderers";
// import {BarChart, PieChart} from 'echarts/charts';
// import {
//   TitleComponent,
//   TooltipComponent,
//   GridComponent,
//   LegendComponent,
//   DatasetComponent
// } from 'echarts/components';
// echarts.use(
//   [
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     BarChart,
//     PieChart,
//     LegendComponent,
//     DatasetComponent,
//     CanvasRenderer
//   ]
// );
export default {
  props: {
    outerid: {
      default: ""
    },
    datas: {
      type: Array,
      default: function() {
        return [];
      }
    },
    K: {
      default: 0
    }
  },
  name: "MyChart",
  data() {
    return {
      chartOptions: {
        title: { text: "第" + this.K + "题答案分布" },
        tooltip: {},
        series: [
          {
            itemStyle: {
              // 阴影的大小
              shadowBlur: 200,
              // 阴影水平方向上的偏移
              shadowOffsetX: 0,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },
            name: "答案分布",
            type: "pie",
            radius: "55%",
            data: this.datas
          }
        ]
      }
    };
  },
  methods: {
    initChart() {
      var myChart = echarts.init(document.getElementById(this.outerid));
      myChart.setOption(this.chartOptions);
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>
<style scoped>
.chart {
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>